[class^="start-drag-resize"] {
  &, & * {
    user-select: none !important;
  }
}
.start-drag-resize__top,
.start-drag-resize__bottom {
  &, & * {
    cursor: row-resize !important;
  }
}

.start-drag-resize__left,
.start-drag-resize__right {
  &, & * {
    cursor: col-resize !important;
  }
}

.drag-resize-handle {
  background-color: transparent;
  position: absolute;
  z-index: 2;

  &:hover,
  &.is-active {
    background-color: rgba(76, 0, 255, 0.2);

    &::before {
      border-color: #333;
    }
  }

  
  $default-handle-size: 6px;

  &.direction-top, 
  &.direction-bottom {
    width: 100%;
    height: var(--handle-size, $default-handle-size);
    cursor: row-resize;
  }

  &.direction-left,
  &.direction-right {
    width: var(--handle-size, $default-handle-size);
    height: 100%;
    cursor: col-resize;
  }

  &.direction-top {
    top: 0;
    left: 0;
  }

  &.direction-bottom {
    left: 0;
    bottom: 0;
    // margin-top: calc(var(--handle-size, $default-handle-size) * -1);
  }

  &.direction-left {
    top: 0;
    left: 0;
  }

  &.direction-right {
    top: 0;
    right: 0;
    // margin-left: calc(var(--handle-size, $default-handle-size) * -1);
  }

  &.direction-left,
  &.direction-right {
    &::before {
      width: 4px;
      height: 20px;
      border-left: 1px solid;
      border-right: 1px solid;
    }
  }

  &.direction-top,
  &.direction-bottom {
    &::before {
      width: 20px;
      height: 4px;
      border-top: 1px solid;
      border-bottom: 1px solid;
    }
  }

  &::before {
    content: "";
    border-color: #999;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.9);
  }
}
